<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="helps">
      <p>神秘商店</p>
      <p style="text-align: center;color: #fff;font-size: 20px;">购买物品：/购买编号+数量</p>
    </div>
    <div class="dataList">
      {{each MyData val}}
      <div class="data">
        <div>{{val.name}}</div>
        <div>{{val.type}}</div>
        <div>ID：{{val.id}}</div>
        <div>价格：{{val.price}}</div>
        <div>数量：{{val.num}}</div>
      </div>
      {{/each}}
    </div>
  </div>
</body>
<style>



  body {
    height: 50%;
    transform: scale(1);
    background: url('@/resources/assets/img/help/help.png');
    background-size: 100% auto;
  }

  * {
    padding: 0;
    margin: 0;
  }

  .container {
    width: 100%;
    padding: 20px;
  }


  .helps {
    color: #fff;
    font-size: 42px;
    width: 70%;
    border-radius: 20px;
    text-align: center;
    margin: 50px auto;
    background: rgba(78, 79, 81, 0.7);
    font-weight: 900;
  }


  .dataList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .data {
    width: 30%;
    display: inline-block;
    margin: 10px;
    min-height: 100px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgba(78, 79, 81, 0.7);
  }

  .dataList .data div {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
  }

  .dataList .data div:nth-of-type(1) {
    font-size: 26px;
    font-weight: 900;
    line-height: 30px;
  }

  .dataList .data div:nth-of-type(2) {
    font-size: 22px;
    font-weight: 900;
    line-height: 26px;
  }
</style>

</html>